<template>
  <div class="add-goods-wrap">
    <h4>{{id ? '上架' : '编辑'}}物品</h4>
    <div class="content">
      <el-form ref="form" :model="form" label-width="120px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="商品信息" name="first">
            <el-form-item label="名称">
              <el-input v-model="form.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="form.num" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
              <template>
                <el-upload
                class="upload-demo"
                :action="baseUrl + '/uploads'"
                :headers="getAuthHeader()"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handelSuccess"
                :file-list="fileList"
                :accept="'jpg/png'"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传图片</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
              </template>
              <!-- <template v-else>
                bianji
              </template> -->
            </el-form-item>
            <el-form-item label="零售价">
              <el-input v-model="form.retailPrice" clearable></el-input>
            </el-form-item>
            <el-form-item label="原价">
              <el-input v-model="form.originalPrice" clearable></el-input>
            </el-form-item>
            <el-form-item label="单位">
              <el-input v-model="form.unit" clearable></el-input>
            </el-form-item>
            <el-form-item label="品牌">
              <el-input v-model="form.brand" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品类别">
              <el-select v-model="form.classify" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item._id"
                  :label="item.title"
                  :value="item.title">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签">
              <el-select
                v-model="form.tag"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择标签">
                <el-option
                  v-for="item in optionsTag"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="简介">
              <el-input
                v-model="form.intro"
                clearable
                type="textarea"
                autosize
              ></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="参考信息" name="second">
            <el-form-item label="京东参考价">
              <el-input v-model="form.JDprice" clearable></el-input>
            </el-form-item>
            <el-form-item label="淘宝参考价">
              <el-input v-model="form.TMprice" clearable></el-input>
            </el-form-item>
            <el-form-item label="参考链接">
              <el-input v-model="form.referenceURL" clearable></el-input>
            </el-form-item>
             <el-form-item label="上架时间">
               <el-date-picker
                  v-model="form.addTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              <!-- <el-input v-model="form.addTime" clearable></el-input> -->
            </el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { creatGoods, getGoodsClassify, idGetGoods, updateGoods } from '../../utils/api/goods'
export default {
  name: "addGoods",
  data() {
    return {
      id: '',
      fileList: [],
      activeName: "first",
      baseUrl: "",
      options: [],
      optionsTag: [],
      form: {
        name: "",
        retailPrice: "",
        originalPrice: "",
        unit: "",
        brand: "",
        intro: "",
        img: [],
        JDprice: '',
        TMprice: '',
        referenceURL: '',
        classify: '',
        addTime: '',
        tag: [],
        num: ''
      },
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        }
    };
  },
  created() {
    this.baseUrl = process.env.VUE_APP_BASE_API
    if (this.$route.params.id) {
      this.id = this.$route.params.id
      this.getGood()
    }
    this.getList()
  },
  methods: {
    // 删除上传文件
    handleRemove(file) {
      this.form.img = this.form.img.filter((v) => v.uid != file.uid);
    },
    // 点击上传文件
    handlePreview(file) {
      console.log(file);
    },
    // tab栏切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 上传成功回调
    handelSuccess(response) {
      this.form.img.push(response.data);
    },
    // 获取商品分类列表
    async getList() {
      let res = await getGoodsClassify()
      this.options = res.items
      // console.log(res)
    },
    async getGood () {
      let res = await idGetGoods(this.id)
      if (res.code === 200 ) {
        this.form = res.data
        this.fileList = res.data.img
      }
    },
    // 提交
    async onSubmit() {
      console.log(this.form)
      const day = dayjs(this.form.addTime).format('YYYY-MM-DD')
      console.log(day, 'day')
      this.form.addTime = dayjs(day).valueOf()
      let res = {}
      // 编辑
      if (this.id) {
        res = await updateGoods(this.id, this.form)
      } else { // 新增
        res = await creatGoods(this.form)
      }
      if (res.code === 200) {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        this.$router.push({
          path: '/goodsList'
        })
      }
    }
  }
};
</script>

<style lang="less" scoped>
@themeColor: #45be93;
.content {
  margin-top: 20px;
  .el-form-item {
    width: 50%;
  }
  /deep/.el-tabs__item.is-active {
    color: @themeColor;
  }
  /deep/.el-tabs__active-bar {
    background-color: @themeColor;
  }
  /deep/.el-tabs__item {
    &:hover {
      color: @themeColor;
    }
  }
  .el-button--primary {
    background-color: @themeColor;
    border-color: @themeColor;
    margin-left: 25%;
    margin-top: 40px;
    padding: 12px 40px;
  }
}
</style>